<template>
  <v-card>
    <template #title>
      <v-icon icon="mdi-account"></v-icon>
      {{ userInfoStore.userInfo.username }}，{{ greeting }}
    </template>

    <template #subtitle>
      <v-container>
        职位: {{ userInfoStore.userInfo.role! }}<br />
      </v-container>
    </template>

    <template #append>
      <v-btn icon variant="flat">
        <v-icon>mdi-folder-star</v-icon>
        <v-tooltip activator="parent">查看收藏夹</v-tooltip>
      </v-btn>

      <v-btn icon variant="flat">
        <v-icon>mdi-dots-vertical</v-icon>
        <v-tooltip activator="parent"> 查看个人信息</v-tooltip>
        <v-dialog activator="parent">
          <template #default="{ isActive }">
            <v-card>
            <v-card-title>个人信息</v-card-title>
            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12" sm="6">
                    {{ userInfoStore.userInfo.username }}
                  </v-col>
                  <v-col cols="12" sm="6">
                    {{ userInfoStore.userInfo.role }}
                  </v-col>
                  <v-col cols="12" sm="6">
                    {{ userInfoStore.userInfo.detail.email }}
                  </v-col>
                  <v-col cols="12" sm="6">
                    {{ userInfoStore.userInfo.detail.phone }}
                  </v-col>
                  <v-col cols="12" sm="6" >
                    <v-btn class="mx-10" @click="isActive.value=false"><v-icon>mdi-arrow-u-left-top-bold </v-icon> 返回</v-btn>
                    <v-btn class="mx-10"><v-icon>mdi-pencil</v-icon>
                      编辑
                    <v-dialog activator="parent">
                      <template #default="{isActive}">
                        <v-card>
                          <v-card-title>编辑个人信息</v-card-title>
                          <v-card-text>
                            <v-container>
                              <v-row>
                                <v-col cols="12" sm="6">
                                  <v-text-field v-model="newEmail" v-bind="newEmailAttrs" :error-messages="errors.newEmail"   label="邮箱"></v-text-field>
                                </v-col>
                                <v-col cols="12" sm="6">
                                  <v-text-field v-model="newPhone" v-bind="newPhoneAttrs" :error-messages="errors.newPhone"   label="电话"></v-text-field>
                                </v-col>
                              </v-row>
                            </v-container>
                          </v-card-text>
                          <v-card-actions>
                            <v-btn @click="isActive.value=false">返回</v-btn>
                            <v-btn @click="editInfo">确定</v-btn>
                          </v-card-actions>

                        </v-card>
                      </template>

                    </v-dialog>
                    </v-btn>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>
          </v-card>
          </template>
        </v-dialog>
      </v-btn>

    </template>
  </v-card>
  <overlayTip ref="overlayTipInstance"/>
</template>
<script setup lang="ts">
import overlayTip from '@/components/common/overlayTip.vue';
import {useUserInfoStore } from '@/stores/user/UserInfo';
import { useForm } from 'vee-validate';
import { onBeforeMount, ref, useTemplateRef } from 'vue';

const userInfoStore = useUserInfoStore();
onBeforeMount(async () => {
  await userInfoStore.dispatchUserInfo();
});


const enum Time {
  Morning = '早上好!',
  Afternoon = '中午好!',
  Evening = '下午好!',
  Night = '晚上好!'
}

function getGreeting(): string {
  const hour = new Date().getHours();
  if(hour >= 6 && hour < 12) return Time.Morning;
  if(hour >= 12 && hour < 14) return Time.Afternoon;
  if(hour >= 14 && hour < 18) return Time.Evening;

  return Time.Night;
}

const greeting = ref(getGreeting());

// 修改dialog
import * as yup from 'yup';
const schema = yup.object({
  newEmail: yup.string().email("请输入正确的邮箱").required("新邮箱不能为空"),
  newPhone: yup.string().matches(/^1[3-9]\d{9}$/, '请输入正确的手机号码').required("新手机号不能为空")
});
const {handleSubmit, defineField, errors} = useForm({
  validationSchema: schema,
  initialValues: {
    newEmail: userInfoStore.userInfo.detail.email,
    newPhone: userInfoStore.userInfo.detail.phone
  }
});

const [newEmail, newEmailAttrs] = defineField('newEmail');
const [newPhone, newPhoneAttrs] = defineField('newPhone');
const overlayTipInstance = useTemplateRef('overlayTipInstance');

const editInfo = handleSubmit(async () => {
  if( newEmail.value === userInfoStore.userInfo.detail.email && newPhone.value === userInfoStore.userInfo.detail.phone) {
    overlayTipInstance.value!.warning('信息未修改', 1000);
    return;
  } else {
    await userInfoStore.dispatchModify(newEmail.value, newPhone.value).then(() => {
      overlayTipInstance.value!.info('修改成功', 1000);
      userInfoStore.dispatchUpdateUserInfo();
    });
  }
});

</script>
